<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import Api from '@/api/api.js'
import { Document,Menu as IconMenu, Location, Setting } from '@/element-plugs/icons-vue'
import {mainStore} from '@/store/index.js'
import {storeToRefs } from 'pinia'

const store = mainStore()
// 结构使数据具有响应式特性
const {nav} = storeToRefs(store);

</script>
<template>
    <el-aside class="aside" width="200px">
        <el-menu mode="vertical" class="el-menu--vertical-demo">
            <el-menu-item icon="el-icon-s-home" index="/home/index">
                <span>首页</span>
            </el-menu-item>
            <el-menu-item v-for="item in nav" :key="item.id" :index="item.path">
                <!-- :icon="item.icon ? item.icon : el-icon-s-home" -->
                <el-icon><icon-menu /></el-icon>
                <span>{{ item.name }}</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>